// pages/video/video.js
import request from "../../utils/request";

Page({

    /**
     * 页面的初始数据
     */
    data: {
        // 导航标签数据
        videoGroupList: [],
        //  导航的标识
        navId: "",
        // 展示视频数据
        videoList: [],
        //视频标识id
        videoId: '',
        //记录video播放的时长
        videoUpdateTime: [],
        // 标识刷新是否被触发
        isTriggered: true
    },

    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: function (options) {
        // 获取导航标签数据
        this.getVideoGroupListData();
    },

    // 获取导航数据
    async getVideoGroupListData() {
        let videoGroupListData = await request('/video/group/list');
        this.setData({
            videoGroupList: videoGroupListData.data.slice(0, 14),
            navId: videoGroupListData.data[0].id
        })

        // 获取视频列表数据，只有当导航数据获取到后，才会发送获取视频数据的请求
        this.getVideoList(this.data.navId)
    },

    // 获取视频列表数据
    async getVideoList(navId) {
        let videoListData = await request('/video/group', {
            id: navId
        });
        // 关闭消息提示框
        wx.hideLoading();

        let index = 0;
        let videoList = videoListData.datas.map(item => {
            item.id = index++;
            return item;
        })
        this.setData({
            videoList,
            // 关闭下拉刷新
            isTriggered: false
        })
    },

    // 点击切换导航的回调
    changeNav(event) {
        let navId = event.currentTarget.id;
        // 通过 id 向event传参时，如果传的是 number会自动转换为 string
        this.setData({
            navId: navId >>> 0,
            videoList: []
        })
        // 显示正在加载
        wx.showLoading({
            title: "正在加载"
        })

        // 动态获取当前导航对应的视频数据
        this.getVideoList(this.data.navId);
    },

    // 点击播放、继续播放的回调
    handlePlay(event) {
        let vid = event.currentTarget.id;

        //更新data中 videoId的状态
        this.setData({
            videoId: vid
        })

        // 创建控制 video标签的实例对象
        this.videoContext = wx.createVideoContext(vid);
        // 判断当前的视频是否有播放记录
        let {
            videoUpdateTime
        } = this, data;
        let videoItem = videoUpdateTime.find(item => item.vid);
        if (videoItem) {
            this.videoContext.seek(videoItem.currentTime)
        }
        this.videoContext.play();
    },

    // 监听视频播放进度的回调
    handleTimeUpdate(event) {
        let videoTimeObj = {
            vid: event.currentTarget.id,
            currentTime: event.detail.currentTime
        };
        let {
            videoUpdateTime
        } = this.data;
        // 判断记录播放时长的数组中是否有当前播放视频的记录
        let videoItem = videoUpdateTime.find(item =>
            item.vid === videoTimeObj.vid
        );
        if (videoItem) {
            // 存在
            videoItem.currentTime = event.detail.currentTime;
        } else {
            // 不存在
            videoUpdateTime.push(videoTimeObj);
        }
        // 更新数组状态
        this.setData({
            videoUpdateTime
        })
    },

    // 视频播放结束的回调
    handleEnd(event) {
        // 移除播放记录
        let {
            videoUpdateTime
        } = this.data;
        videoUpdateTime.splice(videoUpdateTime.findIndex(item => item.vid === event.currentTarget.id), 1);
        this.setData({
            videoUpdateTime
        })
    },

    // 自定义下拉刷新
    handleRefresher() {
        //再次发送请求，获取最新视频数据
        this.getVideoList(this.data.navId);
    },

    // 自定义上拉加载
    handleToLower() {
        // TODO 等待接口升级
    },

    // 点击跳转搜索页面
    toSearch() {
        wx.navigateTo({
            url: '/pages/search/search',
        });
    },

    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady: function () {

    },

    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function () {

    },

    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide: function () {

    },

    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload: function () {

    },

    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function () {},

    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function () {},

    /**
     * 用户点击右上角分享
     */
    onShareAppMessage: function () {
        return {
            title: '欢迎来到风来音乐'
        }
    }
})